<div id="ecard_frame">
	<canvas id="c" width="960" height="640">
		Sorry, your web browser does not support Canvas content.
	</canvas>
    <div class="center" style="position:relative;">
	<p>Add a photo of you or your friends, JPG or PNG, no larger than 8MB.</p>

	
	<?php

	if ( $user_agent == 'ipad' )
	{
	?>
		<a href="" id="btn_uploadphoto" class="link_btn">Upload Or Take Photo</a>
		<form id="ios_fileupload" action="<?php echo site_url("uploadphoto");?>" method="POST" enctype="multipart/form-data" style="margin-top:-25px;z-index:1000;">
			<input type="file" name="photo_file" id="ios_photo_file" accept="image/*" style="width:150px;opacity:0;height:30px;">
		</form>
		<script>
			$("#ios_photo_file").change(function(){
				if ( $(this).val() != '' )
				{
					$("#ios_fileupload").submit();
				}
			});
		</script>
	<?php
	}
	else
	{
	?>	
		<a href="" id="btn_uploadphoto" class="link_btn">Upload Photo</a>
		<a href="<?php echo site_url("webcamphoto");?>" id="btn_webcamphoto" class="link_btn" style="margin-left:100px;">Webcam Photo</a>
		<div id="file-upload-dialog" title="Upload File">
		<form id="fileupload" action="<?php echo site_url("uploadphoto");?>" method="POST" enctype="multipart/form-data">
			<p><input type="file" name="photo_file" id="photo_file" accept="image/*"></p>
			<p><input type="button" name="upload_btn" id="upload_btn" value="Upload"></p>
		</form>
		</div>
	<?php
	}
	?>	
</div>
</div>



<script>
var base_url = "<?php echo base_url();?>";
var canvas_width = 960;
var canvas_height = 640;

var canvas = new fabric.StaticCanvas('c');
canvas.setBackgroundImage(base_url + 'content/images/Sunset.jpg');
fabric.Image.fromURL(base_url + 'content/images/blue.png', function(img) {	
	canvas.add(img.set({ left: 160, top: 240, angle: 0 }));
});

fabric.Image.fromURL(base_url + 'content/images/red.png', function(img) {	
	canvas.add(img.set({ left: 480, top: 240, angle: 0 }));
});

fabric.Image.fromURL(base_url + 'content/images/green.png', function(img) {	
	canvas.add(img.set({ left: 800, top: 240, angle: 0 }));
});

$(function(){
	$("#file-upload-dialog").dialog({
		autoOpen: false,
		width: 370,
		height: 180,
		modal: true,
	});

	$("#btn_uploadphoto").click(function(){
		$("#file-upload-dialog").dialog('open');
		return false;
	});

	$("#upload_btn").click(function(){
		if ( $("#photo_file").val() != '' )
		{
			$("#fileupload").submit();
		}
		else
		{
			alert("Please select file");
		}
	});
});
</script>
